<template>
    <div id="LiftNav">
        <el-menu
            :router="true"
            :unique-opened="true"
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#04192c"
            text-color="#D9D9D9"
            active-text-color="#3476F1"
        >
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>权限管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="/system/user">用户管理</el-menu-item>
                    <el-menu-item index="/system/role">角色管理</el-menu-item>
                    <el-menu-item index="/system/menu">菜单管理</el-menu-item>
                </el-menu-item-group>
            </el-submenu>

            <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>产品管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="/system/fund">基金管理</el-menu-item>
                    <el-menu-item index="/system/regular">定期管理</el-menu-item>
                    <el-menu-item index="/system/current">活期管理</el-menu-item>
                    <el-menu-item index="/system/gold">黄金管理</el-menu-item>
                </el-menu-item-group>
            </el-submenu>

            <el-menu-item index="/system/logs">
                <i class="el-icon-menu"></i>
                <span slot="title">系统日志</span>
            </el-menu-item>


             <el-submenu index="3">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>系统设置</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="/system/dictionary">字典管理</el-menu-item>
                    <el-menu-item index="/system/sql">SQL监控</el-menu-item>
                </el-menu-item-group>
            </el-submenu>

            <el-menu-item index="/system/management">
                <i class="el-icon-setting"></i>
                <span slot="title">咨讯管理</span>
            </el-menu-item>


            <el-submenu index="4">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>后台看板</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="/system/deal">成交占比</el-menu-item>
                    <el-menu-item index="/system/product">产品占比</el-menu-item>
                    <el-menu-item index="/system/financial">理财占比</el-menu-item>
                    <el-menu-item index="/system/week">一周成交量</el-menu-item>
                    <el-menu-item index="/system/today">今日成交量</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
        <!-- {{ setLiftNav(navItem) }} -->
    </div>
</template>

<script>
import liftNav from "../config/liftNav";
export default {
    data() {
        return {
            navItem: liftNav,
        };
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        // 动态导航栏
        setLiftNav(navItem) {
            console.log(navItem);
            navItem.map((item) => {});
        },
    },
};
</script>

<style lang="scss" scoped>
#LiftNav {
    width: 100%;
    .el-menu {
        width: 100%;
        background-color: #04192c;
        color: #fff !important;
        overflow: hidden;
        border-right: 1px solid #04192c;
        .el-menu-item-group {
            background-color: #04192c;
            color: #fff;
        }
        .el-menu-item {
            &:hover {
                background-color: #17293a !important;
                border-right: 0;
            }
        }
        .is-active {
            border-right: 0;
            background-color: #17293a !important;
            color: #fff;
        }
      
    }
}
</style>